//shop.js
const util = require('../../utils/util.js')

Page({
  // 页面的初始数据
  data: {
    throttle: null, // 节流用
    listsMoveDis: '100%', // 已点列表(购物车)位移距离
    goodsListHeight: 0,
    scrollTop: 0,
    scrollDom: 'id0', // 商品列表要滚动到的DOM
    headerHeight: 0, // 页面头部高度
    nowIndex: 0 // 当前商品类别索引
  },
  // 该方法为一次动画的完整操作
  backAnimation() {
    this.animationData.scale(1).step() // step() 按步骤来，若想动画同时进行需采用链式写法
    this.animationData.rotate(0).step()
    this.animationData.translateX('100%').step()
    this.setData({
      animationData: this.animationData.export()
    })
  },
  // 显示列表
  showLists () {
    this.setData({
      listsMoveDis: '0%'
    })
  },
  // 列表滚动
  scroll (e) {
    // this.data.throttle = setTimeout(() => {
    //   console.log(12323)
    // },100)
    let typeNum = 10 // 大类别数量
    let scrollTop = e.detail.scrollTop // 滚动条滚上去的高度
    // 滚动时获取标题位置
    const query = wx.createSelectorQuery() // 小程序选择DOM方法
    let indexKey = true
    let nowIndex = 0 // 当前滚动索引
    query.selectAll('.type_title_in_list').boundingClientRect(rects => {
      rects.forEach((rect, index) => {
        let top = rect.top - this.data.headerHeight // 每个标题相对于scroll-view的top值
        // console.log(top)
        if (top > 0 && indexKey) {
          indexKey = false
          nowIndex = index - 1
        }
      })
      console.error(nowIndex)
    }).exec()
    // console.log(scrollTop)
  },
  // 生命周期函数--监听页面加载
  onLoad: function (options) {
    const query = wx.createSelectorQuery() // 小程序选择DOM方法
    
    wx.getSystemInfo({ // 获取系统信息
      success: res => {
        let winHeight = res.windowHeight // 屏幕高度
        let reduxHeight = 0
        // 计算head，foot高度
        query.selectAll('.compute').boundingClientRect(rects => {
          console.info(rects)
          rects.forEach((rect, i) => {
            reduxHeight += rect.height
            console.log(reduxHeight)
            if(i === 0){
              // console.info(typeof rect.height)
              this.setData({
                headerHeight: rect.height // 设置页面header高度
              })
            }
            this.setData({
              goodsListHeight: winHeight - reduxHeight
            })
          })
        }).exec()
      },
    })

  },
  // 生命周期函数--监听页面初次渲染完成
  onReady: function () {
    // 创建一个动画实例
    var animation = wx.createAnimation({
      transformOrigin: "50% 50%",
      duration: 1000,
      timingFunction: "ease",
      delay: 0
    })
    this.animationData = animation
    // 定义动画动作
    animation.scale(2, 2).rotate(45).step() // 链式写法
    // 导出动画
    this.setData({
      animationData: animation.export()
    })
    // 2s后再调用一次动画
    setTimeout(() => {
      this.backAnimation()
    }, 3000)
  },
  // 生命周期函数--监听页面显示
  onShow: function () {
  },
  // 生命周期函数--监听页面隐藏
  onHide: function () {
  },
  // 生命周期函数--监听页面卸载
  onUnload: function () {
  },
  // 页面相关事件处理函数--监听用户下拉动作
  onPullDownRefresh: function () {
  },
  // 页面上拉触底事件的处理函数
  onReachBottom: function () {
  },
  // 用户点击右上角转发
  onShareAppMessage: function () {
  },
  // 页面滚动触发事件的处理函数
  onPageScroll: function () {
  },
  // 当前是 tab 页时，点击 tab 时触发
  onTabItemTap() {
  }
})
